<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>视图</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card body-style="background-color: #111f40">
      <el-row>
        <el-col :span="8"
                class="container_left">
          <div class="inform_container">
            <span>通知</span>
            <el-carousel height="200px">
              <el-carousel-item v-for="(item,index) in informs"
                                :key="index">
                <p class="content">{{ item.inform }}</p>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="data_sta">
            <el-carousel height="430px"
                         direction="vertical"
                         :interval='2000'>
              <el-carousel-item>
                <div id="line_month_visited"
                     style="windth:950px;height: 430px;"></div>
              </el-carousel-item>
              <el-carousel-item>
                <div id="bar_month_visited"
                     style="windth:960px;height: 440px;"></div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <el-col :span="8"
                class="container_center">
          <div class="school_dorm">
            <p>玉林师范学院 {{tower}}栋</p>
          </div>
          <el-row class="V_and_C">
            <el-col :span="12">
              <div class="visited">
                <h4>本月来访人数</h4>
                <div class="count">
                  <p>{{month_visited_count}}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="come_back_late">
                <h4>本月晚归人数</h4>
                <div class="count">
                  <p>{{month_come_back_late_count}}</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8"
                class="container_right">
          <div class="V_and_C_details">
            <div class="visited_details">
              <el-table style="width: 100%"
                        :header-cell-style="header_style"
                        :cell-style="header_style"
                        :data="visiter">
                <el-table-column prop="name"
                                 label="来访人">
                </el-table-column>
                <el-table-column prop="dorm"
                                 label="访问宿舍">
                </el-table-column>
                <el-table-column prop="visitTime"
                                 label="访问时间">
                </el-table-column>
              </el-table>
            </div>
            <div class="come_back_late_details">
              <el-table style="width: 100%"
                        :header-cell-style="header_style"
                        :cell-style="header_style"
                        :data="come_back_late">
                <el-table-column prop="name"
                                 label="姓名">
                </el-table-column>
                <el-table-column prop="dorm"
                                 label="宿舍">
                </el-table-column>
                <el-table-column prop="BCLtime"
                                 label="晚归时间">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
import ws from 'commonjs/network/websocket'
import { mGetDate } from 'commonjs/utils.js'

export default {
  name: 'dataStaGeneral',
  props: [''],
  data () {
    return {
      tower: window.localStorage.getItem('tower'),
      informs: [],
      visiter: [],
      come_back_late: [],
      month_visited_count: 0,
      month_come_back_late_count: 0
    }
  },

  components: {},

  created () {
    ws.Instance.connect()
  },

  beforeMount () { },
  updated () {
    this.draw_visiter()
    this.draw_CBL()
  },
  mounted () {
    setTimeout(() => {
      this.wsGetData()
    }, 1000)
  },
  beforeDestroy () {
    ws.instance.close()
  },

  methods: {
    // ws获取数据存入VUEX
    wsGetData () {
      const data = this.getVuexWsData
      this.informs = data.informs
      this.visiter = data.visited
      this.come_back_late = data.come_back_late
      this.month_visited_count = data.month_visited_count.length
      this.month_come_back_late_count = data.month_come_back_late_count.length
      // console.log('VUEX数据', data.month_visited_count.length)
    },
    // 绘制当月来访人员
    draw_visiter () {
      const line = echarts.init(document.getElementById('line_month_visited'))
      const arr = this.counts_persion(this.getVuexWsData.month_visited_count)
      const option = {
        title: {
          text: '本月每日来访人数',
          top: '5px',
          textStyle: {
            color: '#56b7c5',
            fontsize: 15
          }
        },
        dataZoom: {
          type: 'inside',
          show: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },
            lineStyle: {
              width: 0
            }
          },
          backgroundColor: '#0d2a4e',
          textStyle: {
            color: '#fff'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        xAxis: {
          type: 'category',
          data: arr[0],
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff'
            },
            // 默认x轴字体大小
            fontSize: 12,
            // margin:文字到x轴的距离
            margin: 15
          },
          axisPointer: {
            label: {
              padding: [0, 0, 10, 0],
              color: '#fff',
              margin: 15,
              // 移入时的字体大小
              fontSize: 12,
              backgroundColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#0d2a4e' // 0% 处的颜色
                }, {
                  offset: 0.86,
                  color: '#0d2a4e' // 0% 处的颜色
                }, {
                  offset: 0.86,
                  color: '#33c0cd' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#33c0cd' // 100% 处的颜色
                }],
                global: false
              }
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          },
          splitLine: {
            show: true
          }
        },
        series: [{
          data: arr[1],
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 5,
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: '#9effff'
            },
            {
              offset: 1,
              color: '#9E87FF'
            }
            ]),
            shadowColor: 'rgba(158,135,255, 0.3)',
            shadowBlur: 10,
            shadowOffsetY: 20
          },
          itemStyle: {
            borderColor: '#73DDFF'
          }
        },
        {
          data: arr[1],
          type: 'bar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#00fcae'
              }, {
                offset: 1,
                color: '#006388'
              }]),
              opacity: 1
            }
          }
        }]
      }
      line.setOption(option)
    },
    // 绘制当月晚归人员
    draw_CBL () {
      const bar = echarts.init(document.getElementById('bar_month_visited'))
      const arr = this.counts_persion(this.getVuexWsData.month_come_back_late_count, 'come_back_late')
      const option = {
        title: {
          text: '本月每日晚归人数',
          top: '5px',
          textStyle: {
            color: '#56b7c5',
            fontsize: 15
          }
        },
        dataZoom: {
          type: 'inside',
          show: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },
            lineStyle: {
              width: 0
            }
          },
          backgroundColor: '#0d2a4e',
          textStyle: {
            color: '#fff'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        xAxis: {
          type: 'category',
          data: arr[0],
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff'
            },
            // 默认x轴字体大小
            fontSize: 12,
            // margin:文字到x轴的距离
            margin: 15
          },
          axisPointer: {
            label: {
              padding: [0, 0, 10, 0],
              color: '#fff',
              margin: 15,
              // 移入时的字体大小
              fontSize: 12,
              backgroundColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#0d2a4e' // 0% 处的颜色
                }, {
                  offset: 0.86,
                  color: '#0d2a4e' // 0% 处的颜色
                }, {
                  offset: 0.86,
                  color: '#33c0cd' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#33c0cd' // 100% 处的颜色
                }],
                global: false
              }
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          }
        },
        series: [{
          data: arr[1],
          type: 'bar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#00fcae'
              }, {
                offset: 1,
                color: '#006388'
              }]),
              opacity: 1
            }
          }
        },
        {
          data: arr[1],
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 5,
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: '#9effff'
            },
            {
              offset: 1,
              color: '#9E87FF'
            }
            ]),
            shadowColor: 'rgba(158,135,255, 0.3)',
            shadowBlur: 10,
            shadowOffsetY: 20
          },
          itemStyle: {
            borderColor: '#73DDFF'
          }
        }]
      }
      bar.setOption(option)
    },
    // 统计本月每天来访人员或晚归人员总数
    counts_persion (data, type = 'visit') {
      const dayCountObj = {}
      const dataArrTime = []
      if (!(type === 'visit')) {
        console.log(data[0])
        data.forEach(valid => {
          dataArrTime.push(new Date(valid.BCLtime))
        })
      } else {
        data.forEach(valid => {
          dataArrTime.push(new Date(valid.visitTime))
        })
      }
      for (let day = 1; day <= mGetDate(); day++) {
        dayCountObj[day] = 0
      }
      // console.log(dayCountObj[dataArrTime[0].getDate()])
      dataArrTime.forEach(valid => {
        if (typeof dayCountObj[valid.getDate()] !== 'undefined') {
          dayCountObj[valid.getDate()] += 1
        }
      })
      return [Object.keys(dayCountObj), Object.values(dayCountObj)]
    },
    header_style ({ row, rowIndex }) {
      return 'background-color: #0e2c50;'
    }
  },
  computed: {
    getVuexWsData () {
      return this.$store.getters['websocketdata/getData']
    }
  },

  watch: {
    getVuexWsData (newValue, pre) {
      this.wsGetData()
    }
  }

}

</script>
<style lang='less' scoped>
p {
  margin: 0;
}
.container_left {
  .inform_container {
    position: relative;
    border: 1px solid #16526f;
    span {
      position: absolute;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 150px;
      color: #fff;
      z-index: 10;
      background-color: #114170;
      text-align: center;
    }
    span::before,
    span::after {
      content: '';
      position: absolute;
      height: 20px;
      width: 3px;
      background-color: #114170;
      color: #114170;
    }
    span::before {
      left: -5%;
    }
    span::after {
      right: -5%;
    }
    .el-carousel {
      background-color: #0e2e53;
      .content {
        color: #fff;
        padding: 20px 5px;
        text-indent: 2em;
      }
    }
  }
  .data_sta {
    height: 430px;
    width: 955px;
    margin-top: 10px;
    border: 1px solid #16526f;
    #line_month_visited {
      background-color: #0d2a4e;
    }
    #bar_month_visited {
      background-color: #0d2a4e;
    }
  }
}

.container_center {
  padding: 0 5px;
  .school_dorm {
    position: relative;
    background-color: #0d2a4e;
    clip-path: polygon(100% 0, 90% 100%, 10% 100%, 0 0);
    height: 40px;

    p {
      text-align: center;
      margin: 0;
      height: 40px;
      line-height: 40px;
      color: #5bc2ce;
    }
  }
  .V_and_C {
    h4 {
      text-align: center;
      margin: 10px 0;
    }
    .count {
      height: 120px;
      p {
        text-align: center;
        line-height: 100px;
        height: 100%;
        width: 100%;
        font-size: 70px;
      }
    }
    .visited {
      border-left: 1px solid #16526f;
      border-bottom: 1px solid #16526f;
      h4 {
        color: #5bc2ce;
      }
      .count {
        p {
          color: #5bc2ce;
        }
      }
    }
    .come_back_late {
      border-right: 1px solid #16526f;
      border-bottom: 1px solid #16526f;
      h4 {
        color: #f18725;
      }
      .count {
        p {
          color: #f18725;
        }
      }
    }
  }
}

.container_right {
  .V_and_C_details {
    width: 100%;
    height: 650px;
    display: flex;
    flex-direction: column;
    .el-table {
      margin-top: 0;
      color: #fff;
    }
    /deep/ .el-table,
    .el-table__expanded-cell {
      background-color: #0e2c50;
    }
    /deep/ .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
      background-color: #0e2c50;
    }
    /deep/ .el-table td,
    .el-table th.is-leaf {
      // border-bottom-color: #5bc2ce;
      border: none;
    }
    .visited_details {
      flex: 1;
    }
    .come_back_late_details {
      flex: 1;
    }
  }
}
</style>
